<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:v-bind="http://www.w3.org/1999/xhtml"
        xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
        xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="keywords" content="SFAC" />
  <meta name="description" content="" />
  <title>Sping Boot</title>

  <!-- 引入 css -->
  <!-- bootstrap -->
  <link href="/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Font Awesome -->
  <link href="/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  <!-- Custom -->
  <link href="/css/custom.min.css" rel="stylesheet" />

  <!-- 引入 js -->
  <!-- jQuery -->
  <script src="/vendors/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="/vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
  <!-- layer -->
  <script src="https://cdn.bootcss.com/layer/2.1/layer.js" type="text/javascript"></script>
  <!-- 删除确认框-->
  <script src="/vendors/bootbox/js/bootbox.js" type="text/javascript"></script>
</head>
<body class="login">
<div id="loginDiv">
  <div class="login_wrapper">
    <div class="animate form login_form">
      <section class="login_content">
        <form action="javascript:void(0);">
          <h1>register Form</h1>
          <div>
            <input
                    type="text"
                    v-model="user.userName"
                    class="form-control"
                    placeholder="Username"
                    required=""
            />
          </div>
          <div>
            <input
                    type="password"
                    v-model="user.password"
                    class="form-control"
                    placeholder="Password"
                    required=""
            />
          </div>
          <div>

<!--            <input-->
<!--                    type="password"-->
<!--                    password="#{password}"-->
<!--                    class="form-control"-->
<!--                    placeholder="Password again"-->
<!--                    required=""-->
<!--            />-->
<!--            <canvas id="canvas" @click="draw()" width="100" height="36"></canvas>-->
          </div>
            <div>
<!--                <input-->
<!--                        class="form-control input-val"-->
<!--                        type="text"-->
<!--                        v-model="inputNum"-->
<!--                        placeholder="请输入验证码（不区分大小写）"-->
<!--                        style="float: left; width: 65%; margin-bottom: 0px"-->
<!--                />-->
          <div>

            <a class="btn btn-default submit" @click="register()" href="javascript:void(0);">register</a>
              <a class="reset_pass" href="login">return</a>
          </div>

          <div class="clearfix">
<!--              <a class="reset_pass" href="login">return</a>-->
          </div>

          <div class="separator">
<!--            <p class="change_link">-->
<!--              New to site?-->
<!--              <a href="#signup" class="to_register"> Create Account </a>-->
<!--            </p>-->

            <div class="clearfix"></div>
            <br />

            <div>
              <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
              <p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
            </div>
          </div>
        </form>
      </section>
    </div>
  </div>
</div>

<script>
  var loginVue = new Vue({
    el: "#loginDiv",
    data: {
      user: {
        userName: "",
        password: "",
      },
      showNum: [],
      inputNum: "",
    },
    methods: {
      register: function () {
        if (this.user.userName == "" || this.user.password == "") {
          layer.msg("请输入用户名和密码！", { icon: 0 });
          return;
        }
        // if (this.inputNum == "") {
        //   layer.msg("请输入验证码！", { icon: 0 });
        //   return;
        // } else if (this.inputNum.toLowerCase() != this.showNum.join("").toLowerCase()) {
        //   layer.msg("验证码输入错误！", { icon: 0 });
        //   return;
        // }

        var self = this;
        $.ajax({
          url: "/api/register",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(self.user),
          success: function (rs) {
            if (rs.status == 200) {
              location.href = "/login";
            } else {
              layer.msg(rs.message, { icon: 0 });
            }
          },
          error: function (erro) {
            layer.msg(erro, { icon: 0 });
          },
        });
      },
      draw: function () {
        var canvas_width = $("#canvas").width();
        var canvas_height = $("#canvas").height();
        var canvas = document.getElementById("canvas"); //获取到canvas的对象
        var context = canvas.getContext("2d"); //获取到canvas画图的环境
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //获取到数组的长度

        for (var i = 0; i <= 3; i++) {
          var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
          var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
          var txt = aCode[j]; //得到随机的一个内容
          this.showNum[i] = txt.toLowerCase();
          var x = 10 + i * 20; //文字在canvas上的x坐标
          var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
          context.font = "bold 23px 微软雅黑";

          context.translate(x, y);
          context.rotate(deg);

          context.fillStyle = this.randomColor();
          context.fillText(txt, 0, 0);

          context.rotate(-deg);
          context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) {
          //验证码上显示线条
          context.strokeStyle = this.randomColor();
          context.beginPath();
          context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
          context.stroke();
        }
        for (var i = 0; i <= 30; i++) {
          //验证码上显示小点
          context.strokeStyle = this.randomColor();
          context.beginPath();
          var x = Math.random() * canvas_width;
          var y = Math.random() * canvas_height;
          context.moveTo(x, y);
          context.lineTo(x + 1, y + 1);
          context.stroke();
        }
      },
      randomColor: function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
      },
    },
    mounted() {
      this.draw();
    },
  });
</script>
</body>
</html>